export default function useScreenAdapte() {
  const wrapBox = ref<HTMLDivElement | null>();
  const timer = ref<NodeJS.Timeout>();

  const scale = reactive<{
    width: number;
    height: number;
  }>({
    width: 1,
    height: 1,
  });

  const calcRate = () => {
    if (wrapBox.value) {
      scale.width = window.innerWidth / 1920;
      scale.height = window.innerHeight / 1080;
      wrapBox.value.style.transform = `scale(${scale.width}, ${scale.height})`;
    }
  };

  const resize = () => {
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
      calcRate();
    }, 100);
  };

  const onWindowResize = () => {
    window.addEventListener('resize', resize);
  };

  const unWindowResize = () => {
    window.removeEventListener('resize', resize);
  };

  return {
    wrapBox,
    calcRate,
    onWindowResize,
    unWindowResize,
  };
}
